<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>iview example</title>
    <script type="text/javascript" src="../vue/dist/vue.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../iview/dist/styles/iview.css">
    <script type="text/javascript" src="../config.js"></script>
    <script type="text/javascript" src="../jquery/dist/jquery.min.js"></script>
    <script type="text/javascript" src="../iview/dist/iview.js"></script>
</head>

<body>
    <div  id="app">


        <div>

            <Page :total="total" show-total @on-change="onChangePage"></Page>
            <br />
            <i-table :columns="columns" :data="data" @on-row-click="onRowClick">
            </i-table>
        </div>





        <i-button @click="show">Click me!</i-button>
        <Modal v-model="visible" title="Welcome">Welcome to iView</Modal>
    </div>
    <script>


        new Vue({
            el: '#app',
            data() {
                return {

                    total: 0,
                    current: 1,
                    size: 10,
                    visible: false,
                    columns: [
                        {
                            type: 'selection',
                            width: 50,
                            align: 'center',

                        }, {
                            title: '#',
                            width: 80,
                            align: 'center',

                            render: (h, params) => {
                                var num = params.index + (this.current- 1) * this.size + 1
                                console.log(num);
                                // return h('span',{}, num);

                                return h('div', num);
                                
                            },
                            // render: (h, params) => {
                            //     return h('div', [
            
                            //         h('Button', {}
                            //            , 'abc')
                            //     ]);
                            // }

                        },

                        {
                            title: 'sname',
                            key: 'sname',
                            tooltip: true,
                        },
                        {
                            title: 'ctime',
                            key: 'ctime',
                            tooltip: true,
                        },
                        {
                            title: '操作',
                            key: 'action',
                            // width: 150,
                            align: 'center',
                            render: (h, params) => {
                                return h('div', [
                                    h('Button', {
                                        props: {
                                            type: 'text',
                                            size: 'small',
                                        },
                                        style: {
                                            margin: '2px'
                                        },
                                        on: {
                                            click: () => {
                                                // this.show(params.index)
                                                console.log(params)
                                            }
                                        }
                                    }, '详情'),
                                    h('Button', {
                                        props: {
                                            type: 'primary',
                                            size: 'small'
                                        },
                                        style: {
                                            margin: '2px'
                                        },
                                        on: {
                                            click: () => {
                                                this.remove(params.index)
                                            }
                                        }
                                    }, '修改'),
                                    h('Button', {
                                        props: {
                                            type: 'error',
                                            size: 'small'
                                        },
                                        style: {
                                            margin: '2px'
                                        },
                                        on: {
                                            click: () => {
                                                this.remove(params.index)
                                            }
                                        }
                                    }, '删除')
                                ]);
                            }
                        }

                    ],
                    data: [

                    ]
                }
            },
            methods: {


                show() {
                    this.visible = true;
                },

                onRowClick(row, index) {

                    console.log(row);

                    row._checked = !row._checked;

                    this.data.splice(index, 1, row);
                    //    _checked
                },

                // 获取历史记录信息
                pageData() {

                    var _self = this;
                    $.ajax({
                        url: appConfig.server + '/sysUser/pageInfo?current=' + _self.current + '&size=' + _self.size,
                        // url: appConfig.server +'/sysUser/pageInfo?cur'+,
                        // data: _self.edoCateSearchForm,

                    }).done(
                        function (response) {
                            if (response.code == 0) {
                                var data = response.data;
                                _self.data = data.records;
                                // _self.data.forEach(element => {
                                //     element._checked = true ;
                                // });
                                _self.total = data.total;

                            }
                        }
                    );

                },
                onChangePage(index) {
                    // 当前页码
                    // this.page = index;
                    this.current = index;
                    this.pageData();
                
                },
                // pagesize(index) {
                //     let _start = (this.page - 1) * index;
                //     let _end = this.page * index;
                //     this.historyData = this.ajaxHistoryData.slice(_start, _end);
                //     // 当前展示条数
                //     this.pageSize = index;
                // }

            },
            mounted() {
                // this.handleListApproveHistory();

                // this.historyData = testData.histories;
                // this.dataCount = 4;
                this.pageData();
            },
        })
    </script>
</body>

</html>